<template>
  <div class="box">
    <div>
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>建图</el-tag>
          <el-button @click="btnDraw()" class="btn-draw" size="small">建图</el-button>
        </div>
        <el-container class="card-map" v-loading="loading">
          <div id="map"></div>
          <el-container class="container-slider" direction="vertical">
            <div class="container-icon">
              <i class="el-icon-zoom-in"></i>
            </div>
            <el-slider
              id="slider-scale"
              v-model="scaleSliderValue"
              vertical
              class="el-slider-scale"
              :show-tooltip="false"
              @input="sliderscale()"
              :max="90"
              :min="0"
            ></el-slider>
            <div class="container-icon">
              <i class="el-icon-zoom-out"></i>
            </div>
          </el-container>
        </el-container>
      </el-card>
    </div>

    <div>
      <el-card class="box-card card-stick" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>手柄</el-tag>
        </div>
        <div class="container-stick">
          <div id="stick" ref="stickpan"></div>
        </div>
      </el-card>

      <el-card class="box-card card-speed" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>速度</el-tag>

          <el-popover placement="bottom-end" title="关于该速度滑块" width="170" trigger="hover">
            <div slot>
              <span>手柄和键盘的速度都受该滑块控制。 键盘设置：</span>
              <div class="block-icon-KB">
                <i class="el-icon-top-left"></i>
                <p>U</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-top"></i>
                <p>I</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-top-right"></i>
                <p>O</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-back"></i>
                <p>J</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-video-play"></i>
                <p>K</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-right"></i>
                <p>L</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-bottom-left"></i>
                <p>M</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-bottom"></i>
                <p>,</p>
              </div>

              <div class="block-icon-KB">
                <i class="el-icon-bottom-right"></i>
                <p>.</p>
              </div>
            </div>

            <i
              slot="reference"
              class="el-icon-question"
              style="font-size: 20px; color: #409EFF; float: right"
            ></i>
          </el-popover>
        </div>
        <div class="card-speed-content">
          <div>当前线速度: {{ LS }}</div>
          <div>当前角速度: {{ AS }}</div>
          <div class="block-slider">
            <span>线速度</span>
            <el-slider
              v-model="linearSliderValue"
              :show-tooltip="true"
              @input="sliderlinear()"
              :max="10"
              :min="0"
              :format-tooltip="formatTooltip"
            ></el-slider>
          </div>
          <div class="block-slider">
            <span>角速度</span>
            <el-slider
              v-model="angularSliderValue"
              :show-tooltip="true"
              @input="sliderangular()"
              :max="5"
              :min="0"
              :format-tooltip="formatTooltip"
            ></el-slider>
          </div>
        </div>
      </el-card>
    </div>

    <div>
      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>保存地图</el-tag>
        </div>
        <div>
          <el-input placeholder="请输入新地图文件名" v-model="filename" v-loading="saveloading">
            <template slot="prepend">保存</template>
            <el-button slot="append" icon="el-icon-check" @click="btnsave"></el-button>
          </el-input>
        </div>
      </el-card>

      <el-card class="box-card" shadow="always">
        <div slot="header" class="clearfix">
          <el-tag>其他</el-tag>
        </div>
        <div>
          <el-switch
            v-model="showGrid"
            active-text="显示网格"
            inactive-text="不显示网格"
            @change="switchGrid"
          ></el-switch>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ros } from "../js/connect";
import {
  createView,
  draw,
  changeScale,
  destroy,
  addGird,
  removeGrid,
} from "../js/draw";
import { saveMapByService } from "../js/savemap";
import { cmd_vel_listener } from "../js/topic";
import {
  createKeyboardListener,
  destroyKeyboardListener,
  setKBMaxLinear,
  setKBMaxAngular,
} from "../js/keyboard";
import {
  createJoyStickWithoutDistance,
  destroyjoystick,
  setStickMaxLinear,
  setStickMaxAngular,
} from "../js/joystick";
import { setmode } from "../js/mode";
import { store } from "../state/store";

export default {
  data() {
    return {
      scaleSliderValue: 0,
      linearSliderValue: 3,
      angularSliderValue: 4,
      filename: "",
      LS: 0,
      AS: 0,
      //地图读取
      loading: false,
      // 保存加载
      saveloading: false,
      // grid
      showGrid: false,
    };
  },
  methods: {
    btnDraw() {
      // 设置成建图模式
      setmode(ros, 1);
      this.loading = true;
      if (store.getStatusAction() == "Connected") {
        draw(
          {
            url: store.getUrlAction(),
          },
          this,
          function (self) {
            self.loading = false;
          }
        );
      }
      // 初始化网格
      try {
        this.switchGrid();
      } catch {
        console.log("grid create error");
      }
      // 延时监测
      var that = this;
      setTimeout(function () {
        if (that.loading == true) {
          that.$notify.error({
            title: "错误",
            message: "连接超时，请检查连接状态",
          });
          that.loading = false;
        }
      }, 10000);
    },
    // 显示或移除地图网格
    switchGrid() {
      if (this.showGrid) {
        addGird();
      } else {
        removeGrid();
      }
    },
    // 调整缩放比例
    sliderscale() {
      // console.log(this.scaleSliderValue);
      changeScale((100 - this.scaleSliderValue) * 0.01);
    },
    sliderlinear() {
      setStickMaxLinear(this.linearSliderValue * 0.1);
      setKBMaxLinear(this.linearSliderValue * 0.1);
      console.log(this.linearSliderValue * 0.1);
    },
    sliderangular() {
      setStickMaxAngular(this.angularSliderValue * 0.1);
      setKBMaxAngular(this.angularSliderValue * 0.1);
      console.log(this.angularSliderValue * 0.1);
    },
    formatTooltip(value) {
      return (value * 0.1).toPrecision(2);
    },
    //
    btnsave() {
      // 空值判断
      if (!this.filename){
        console.log("file name is null");
        this.$notify.error({
          title: "错误",
          message: "文件名不符合规则:输入不能为空！",
        });
      }
      // 对输入进行正则表达判断,禁止输入字母数字以外的字符串
      else if (this.filename.search(/^\w+$/i) != -1) {
        console.log("RegExp OK");
        this.saveloading = true;
        saveMapByService(ros,this.filename, this, function (self) {
          self.saveloading = false;
          self.$notify({
            title: "成功",
            message: "保存成功！",
            type: "success",
          });
        });

        // 10秒无反应则判定保存失败
        var that = this;
        setTimeout(function () {
          if (that.saveloading == true) {
            that.$notify.error({
              title: "错误",
              message: "保存超时，请检查连接状态",
            });
            that.saveloading = false;
          }
        }, 10000);

      } else {
        console.log("RegExp Error");
        this.$notify.error({
          title: "错误",
          message: "文件名不符合规则：请不要输入字母和数字以外的文字",
        });
      }
    },
  },
  created() {
    // 速度显示
    var that = this;
    cmd_vel_listener.subscribe(function (msg) {
      // console.log("!"+msg.linear.x);
      // console.log("!"+msg.angular.z);
      that.LS = msg.linear.x.toPrecision(4);
      that.AS = msg.angular.z.toPrecision(4);
    });
  },
  mounted() {
    // 添加按键事件
    createKeyboardListener(document);
    // 添加手柄事件
    createJoyStickWithoutDistance();
    // 创建画布
    createView();
  },
  destroyed() {
    destroyKeyboardListener(document);
    destroyjoystick();
    destroy();
  },
};
</script>

<style>
/* .box-card-stick, */

.block-slider {
  /* display: flex; */
  /* padding: 10px; */
  display: block;
}

.card-stick,
.card-speed {
  width: 240px;
}

.card-speed {
  height: 300px;
}

.card-speed-content {
  line-height: 30px;
}

.container-slider {
  padding: 10px;
  display: inline-block;
}

.container-stick {
  height: 190px;
  width: 200px;
  /* 手柄水平垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.block-icon-KB {
  display: inline;
  float: left;
  height: auto;
  width: 50px;
}

#stick {
  position: relative;
}

.card-map {
  display: inline-block;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
}

.el-slider-scale {
  padding-top: 15px;
  padding-bottom: 15px;
  height: 400px;
  display: block;
}

.container-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-icon-zoom-in,
.el-icon-zoom-out {
  font-size: 25px;
  color: #409eff;
  display: block;
}

.el-slider-drawing {
  height: 200px;
  display: block;
}

.btn-control {
  height: 50px;
  width: 50px;
  background-color: aqua;
  display: block;
}

.btn-control-icon {
  top: 50%;
  left: 50%;
}

.btn-draw {
  float: right;
}
</style>
